<template>
  <div ref="mapChart" style="width:100%;height:350px" />
</template>

<script>
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
import resize from '@/utils/resize'
import { setWatermark } from '@/utils'

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Array,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    },
    toolName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null,
      data: [],
      barData: [],
      yData: []
    }
  },
  watch: {
    chartData(val) {
      this.data = []
      this.barData = []
      this.yData = []

      for (var i = 0; i < val.length; i++) {
        this.data.push({
          name: val[i].province,
          value: val[i].count
        })

        if (i < 10) {
          this.barData.push({
            name: val[i].province,
            value: val[i].count
          })
          this.yData.push(i + val[i].province)
        }
      }

      if (this.chart) {
        this.setOptions()
      } else {
        this.initChart()
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions() {
      this.chart.setOption({
        backgroundColor: {
          image: setWatermark(),
          repeat: 'repeat'
        },
        title: {
          text: this.title,
          x: 'center'
        },
        tooltip: {
          show: true
        },
        toolbox: {
          right: 15,
          feature: {
            saveAsImage: {
              backgroundColor: '#FFF'
            },
            dataView: {
              show: true
            }
          }
        },
        visualMap: {
          type: 'continuous',
          orient: 'horizontal',
          itemWidth: 10,
          itemHeight: 80,
          text: ['高', '低'],
          showLabel: true,
          seriesIndex: [0],
          min: 0,
          max: 100000,
          inRange: {
            color: ['#edfbfb', '#b7d6f3', '#40a9ed']
          },
          textStyle: {
            color: '#7B93A7'
          },
          bottom: 30,
          left: 'left'
        },
        grid: {
          // 控制条形图的位置
          right: 20,
          top: 50,
          bottom: 30,
          width: '20%'
        },
        geo: {
          // 控制地理坐标系
          map: 'china',
          left: 20,
          top: 30,
          bottom: 20,
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            emphasis: {
              areaColor: '#fff464'
            }
          }
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: 'category',
          inverse: true,
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            interval: 0,
            margin: 80,
            textStyle: {
              color: '#455A74',
              align: 'left',
              fontSize: 14
            },
            rich: {
              a: {
                color: '#fff',
                backgroundColor: '#FAAA39',
                width: 20,
                height: 20,
                align: 'center',
                borderRadius: 2
              },
              b: {
                color: '#fff',
                backgroundColor: '#4197FD',
                width: 20,
                height: 20,
                align: 'center',
                borderRadius: 2
              }
            },
            formatter: function(params) {
              if (parseInt(params.slice(0, 1)) < 3) {
                return [
                  '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                ].join('\n')
              } else {
                return [
                  '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                ].join('\n')
              }
            }
          },
          data: this.yData
        },
        series: [{
          name: this.toolName,
          type: 'map',
          geoIndex: 0,
          label: {
            show: false
          },
          data: this.data
        }, {
          name: '用户量前十',
          type: 'bar',
          roam: false,
          visualMap: false,
          zlevel: 2,
          barMaxWidth: 8,
          barGap: 0,
          itemStyle: {
            normal: {
              color: function(params) {
                var colorList = [{
                  colorStops: [{
                    offset: 0,
                    color: '#FFD119' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FFAC4C' // 100% 处的颜色
                  }]
                },
                {
                  colorStops: [{
                    offset: 0,
                    color: '#00C0FA' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#2F95FA' // 100% 处的颜色
                  }]
                }]
                if (params.dataIndex < 3) {
                  return colorList[0]
                } else {
                  return colorList[1]
                }
              },
              barBorderRadius: 15
            }
          },
          data: this.barData
        }]
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.mapChart)
      setTimeout(() => {
        this.setOptions()
      }, 300)
    }
  }
}
</script>
